<template>
  <view>

   <u-navbar :is-back="true" :custom-back="BackM" title="铺货网点" back-text=""></u-navbar>
    <view style="background-color: #f4f5f7">
      <view style="padding: 0.3rem; text-align: center">-商品网点-</view>
    </view>

    <view class="inputS">
      <u-form :model="form" ref="uForm">
        <u-form-item class="item-height" prop="name" label-width="auto" label="网点名称" >
		  <u-input v-model="form.name" placeholder="请填写铺货网点名称" />
		</u-form-item>

        <u-form-item class="item-height" prop="intro" label-width="auto" label="网点电话" >
		  <u-input v-model="form.phone" placeholder="请填写铺货网点电话" />
		</u-form-item>

        <u-form-item class="item-height" prop="sex" :disabled='true' label-width="auto" label="网点位置" >
              <view slot="right" >
                <view>
                  <image @click="goMap"  style="width: 0.6rem;padding: 0rem 0.5rem;height: 1rem;" src="../../style/image/myPos/map.png" alt="">
                </view>
            </view>
          <u-input v-model="form.address" :disabled='true' placeholder="点击右图标选择铺货网点地址"/>
		</u-form-item>
		
		<u-form-item class="item-height" prop="intro" label-width="auto" label="" >
		  <u-input v-model="form.detailAddress" placeholder="备注详细地址" />
		</u-form-item>

        <u-form-item class="item-height" prop="coordinate" label-width="auto" label="网点经纬度">
          <u-input v-model="form.coordinate" :disabled='true' placeholder="选择地点自动获取经纬度"/>
		</u-form-item>
		
        <u-form-item class="item-height" prop="trade" :disabled='true' label-width="auto" label="网点行业">
          <view slot="right" >
                <view style="display: flex;align-items: center;">
                  <image @click="selectShowM"  style="width: 0.4rem;padding: 0.5rem;height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
                </view>
            </view>
          <u-input v-model="form.trade" :disabled='true' placeholder="点击右箭头选择铺货网点行业" />
		</u-form-item>
		
		<u-form-item class="item-height" prop="sex" label-width="auto" label="营业开始时间" >
			<view slot="right" >
				<view style="display: flex;align-items: center;">
				    <image @click="timeShowM('start')"  style="width: 0.4rem;padding: 0.5rem;height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
				</view>
			</view>
		    <u-input v-model="form.starttime" :disabled='true' placeholder="点击右箭头选择营业开始时间" />
		</u-form-item>
		
		<u-form-item class="item-height" prop="sex" label-width="auto" label="营业结束时间" >
		 	<view slot="right" >
		 		<view style="display: flex;align-items: center;">
		 		    <image @click="timeShowM('end')"  style="width: 0.4rem;padding: 0.5rem;height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
		 		</view>
		 	</view>
		     <u-input v-model="form.endtime" :disabled='true' placeholder="点击右箭头选择营业结束时间" />
		</u-form-item> 
      </u-form>
    </view>

    <!-- <u-calendar v-model="show" :mode="mode"  @change="change"></u-calendar> -->

    <u-select v-model="timeShow"  mode="mutil-column" :list="timeList" @confirm="timeChange"></u-select>

    <u-select mode="mutil-column-auto"  @confirm="confirmM" value-name='id'  label-name='name' child-name='level2'  v-model="selectShow" :list="selectList"></u-select>

    <view class="footP">
      <view @click="nextM" style="padding: 0.7rem; display: flex; align-items: center" >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">提交</view>
      </view>
    </view>
    
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { saveShopBranch, findBranchSite } from "../../utils/uniApi";

import { AppModule } from "../../store/modules/app";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public mode = "range";

  public form = {
    name: "",
    phone: "",
    address: "",
	detailAddress: "",
    coordinate: "",
    trade: "",
    starttime: "",
	endtime: "",
  };
  public wdId=''  //网点id
  public shopId=''  //商户id
  public provinceName = "";//省
  public cityName = "";//市
  public districtName = "";//区
  public tradeId = ""; //行业id
  public rules = {
    name: [
      {
        required: true,
        message: "请输入网点名称",
        // 可以单个或者同时写两个触发验证方式
        trigger: ["change", "blur"],
      },
    ],
    phone: [
      {
        required: true,
        message: "请输入网点电话",
        // 可以单个或者同时写两个触发验证方式
        trigger: ["change", "blur"],
      },
    ],
  };
  
   public selectList = [];//行业选择项
   public timeList = [
	   [
	     { value: "-1", label: "上午", },
	     { value: "-2", label: "下午", },
	   ],
	   [
	     { value: "1", label: "00", },
	     { value: "2", label: "01", },
	     { value: "3", label: "02", },
	     { value: "4", label: "03", },
	     { value: "5", label: "04", },
	     { value: "6", label: "05", },
	     { value: "7", label: "06", },
	     { value: "8", label: "07", },
	     { value: "9", label: "08", },
	     { value: "10", label: "09", },
	     { value: "11", label: "10", },
	     { value: "12", label: "11", },
	     { value: "13", label: "12", },
	   ],
	   [ 
		 { value: "25", label: "00", },{ value: "26", label: "01", },{ value: "27", label: "02", },{ value: "28", label: "03", },
	     { value: "29", label: "04", },{ value: "30", label: "05", },{ value: "31", label: "06", },{ value: "32", label: "07", },
	     { value: "33", label: "08", },{ value: "34", label: "09", },{ value: "35", label: "10", },{ value: "36", label: "11", },
	     { value: "37", label: "12", },{ value: "38", label: "13", },{ value: "39", label: "14", },{ value: "40", label: "15", },
	     { value: "41", label: "16", },{ value: "42", label: "17", },{ value: "43", label: "18", },{ value: "44", label: "19", },
	     { value: "45", label: "20", },{ value: "46", label: "21", },{ value: "47", label: "22", },{ value: "48", label: "23", },
	     { value: "49", label: "24", },{ value: "50", label: "25", },{ value: "51", label: "26", },{ value: "52", label: "27", },
	     { value: "53", label: "28", },{ value: "54", label: "29", },{ value: "55", label: "30", },{ value: "56", label: "31", },
	     { value: "57", label: "32", },{ value: "58", label: "33", },{ value: "59", label: "34", },{ value: "60", label: "35", },
	     { value: "61", label: "36", },{ value: "62", label: "37", },{ value: "63", label: "38", },{ value: "64", label: "39", },
	     { value: "65", label: "40", },{ value: "66", label: "41", },{ value: "67", label: "42", },{ value: "68", label: "43", },
	     { value: "69", label: "44", },{ value: "70", label: "45", },{ value: "71", label: "46", },{ value: "72", label: "47", },
	     { value: "73", label: "48", },{ value: "74", label: "49", },{ value: "75", label: "50", },{ value: "76", label: "51", },
	     { value: "77", label: "52", },{ value: "78", label: "53", },{ value: "79", label: "54", },{ value: "80", label: "55", },
	     { value: "81", label: "56", },{ value: "82", label: "57", },{ value: "83", label: "58", },{ value: "84", label: "59", },
	   ],
   ];

  public timeShow = false;
  public timeShowValue = '';
  public selectShow = false;
  

  onReady() {
    // this.$refs.uForm.setRules(this.rules);
    (this.$refs["uForm"] as any).setRules(this.rules);
    console.log(123);
  }
  created() {
    // this.$refs.uForm.setRules(this.rules);
  }
  onLoad(value:any){
	  if(value.WDDic){
		  var WDDic = JSON.parse(decodeURIComponent(value.WDDic))
		  this.wdId = WDDic.id
		  this.shopId = WDDic.shopId
		  this.provinceName = WDDic.provinceName
		  this.cityName = WDDic.cityName
		  this.districtName = WDDic.districtName
		  this.tradeId = WDDic.siteId
		  this.form.name = WDDic.branchName
		  this.form.phone = WDDic.contactsPhone
		  this.form.address = WDDic.provinceName + WDDic.cityName + WDDic.districtName
		  this.form.detailAddress = WDDic.address
		  this.form.coordinate = WDDic.coordinate
		  this.form.starttime = WDDic.workingStartTime
		  this.form.endtime = WDDic.workingEndTime
		  this.form.trade = WDDic.siteName
	  }
	  if(value.data){
		  var WDDic = JSON.parse(decodeURIComponent(value.data))
		  this.shopId = WDDic.shopId
	  }
  }

  mounted() {
    findBranchSite().then((res: any) => {
      this.selectList = res.data.data;
      uni.hideLoading();
    });
  }

  BackM() {
    uni.navigateBack({
      delta: 1,
    });
  }
  
  //行业选择确认按钮
  confirmM(data: any) {
    (this.form as any).trade = data[1].label;
    this.tradeId = data[1].value;
  }
  //行业选择弹窗
  selectShowM() {
    this.selectShow = !this.selectShow;
  }
  //时间选择弹窗
  timeShowM(value:any) {
	this.timeShowValue = value
    this.timeShow = !this.timeShow;
  }
  //时间选择弹窗
  timeChange(e: any) {
	  if(this.timeShowValue == 'start'){
	  	if(e[0].label == '上午'){
	  		this.form.starttime = e[1].label + ":" + e[2].label
	  	}else if(e[0].label == '下午'){
	  		this.form.starttime = parseInt(e[1].label)+12 + ":" + e[2].label
	  	}
	  }else if(this.timeShowValue == 'end'){
	  	if(e[0].label == '上午'){
	  		this.form.endtime = e[1].label + ":" + e[2].label
	  	}else if(e[0].label == '下午'){
	  		this.form.endtime = parseInt(e[1].label)+12 + ":" + e[2].label
	  	}
	  }
  }

  nextM() {
	  uni.showLoading({ title: "加载中", });
    let params = {
      shopId:this.shopId,
      id: this.wdId, //网点ID(新增无ID,编辑有ID)
      branchName: this.form.name, //	网点名称
      contactsName: "", //	联系人名字
      contactsPhone: this.form.phone, //	联系人手机号
      // provinceCode			省
      // cityCode				市
      // districtCode			区
      provinceName: this.provinceName, //	省
      cityName: this.cityName, //市
      districtName: this.districtName, //	区
      address: this.form.detailAddress, //	网点地址
      siteId: this.tradeId, //所属行业ID
      siteName: this.form.trade, //	所属行业名称
      coordinate: this.form.coordinate, //地址经纬度
      workingStartTime: this.form.starttime, //		营业开始时间
      workingEndTime: this.form.endtime, //营业结束时间
      del: "", //		是否删除（删除操作传入 1 删除）
	  
    };
	console.log('输出参数：'+JSON.stringify(params))
    saveShopBranch(params).then((res:any)=>{
		uni.hideLoading();
        // console.log(res,"返回结果")
		if(res.data.code == 200){
			uni.showToast({
			  title: "新增编辑网点成功",
			  icon: "none",
			  duration: 1000,
			}); 
			setTimeout(()=>{
				uni.navigateTo({
				   url: "../cargo/selectW",
				});
			},1000)
		}else{
			uni.showToast({
			  title: "新增编辑网点失败",
			  icon: "none",
			  duration: 1000,
			});
		}
    })
  }
  goMap() {
    uni.chooseLocation({
        success: (data) => {
			this.form.coordinate = data.longitude + "," + data.latitude;
			var reg = /.+?(省|市|自治区|自治州|县|区)/g;
			var submitAddress = data.address;
			this.provinceName = (submitAddress as any).match(reg)[0]; //	省
			this.cityName = (submitAddress as any).match(reg)[1]; //	市
			this.districtName = (submitAddress as any).match(reg)[2]; // 区
			this.form.address = this.provinceName + this.cityName + this.districtName
			this.form.detailAddress = submitAddress.replace(this.form.address,'')
        },
    });
  }
  
}
</script>

<style  lang="scss"  scoped>
/deep/.uni-input-input {
  display: block;
  height: 100%;
  background: none;
  color: inherit;
  opacity: 1;
  -webkit-text-fill-color: currentcolor;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-indent: inherit;
  text-transform: inherit;
  text-shadow: inherit;
  //  color: red;
  padding-left: 1rem;
}
.item-height {
  padding: 0.1rem 1rem
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>